#@cmsLayout()

#define cmsContent()
###文章和图集使用同一新增页面，但是使用不同的保存方法和名称，根据类型进行区分
#setLocal(pageTitle='新增文章')
#setLocal(saveUrl='/cmsArt/saveArt')
#if(artType=='2')
	#setLocal(pageTitle='新增图集')
	#setLocal(saveUrl='/cmsArt/savePicArt')
#end
<div class="cms-breadcrumb">
	<i class="layui-icon layui-icon-flag"></i>
	<span class="layui-breadcrumb">
	  	<a href="">文章管理</a>
	  	<a><cite>#(pageTitle)</cite></a>
	</span>
</div>

<div class="body-card layui-card">
	<form id="saveArticle" class="layui-form" action="#(ctx)#(saveUrl)" method="post" onsubmit="return false;">
		#(token)
  		<div class="layui-hide">
  			<input type="text" name="type" value="#(artType)">
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label"><span class="color-warn">*</span> 标题</label>
    		<div class="layui-input-block">
      			<input type="text" name="title" placeholder="请输入文章标题" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">子标题</label>
    		<div class="layui-input-block">
      			<input type="text" name="subtitle" placeholder="请输入文章子标题" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">摘要</label>
    		<div class="layui-input-block">
    			<textarea name="summary" placeholder="请输入文章摘要" class="layui-textarea"></textarea>
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label"><span class="color-warn">*</span> 栏目</label>
    		<div class="layui-input-inline">
      			<select name="column">
      				<option value="0">请选择文章所属栏目</option>###这个必须得有，不然页面显示会乱
				  	#for(x : artColumnsMap)
				  	<optgroup label="#(x.key)">
				  		#for(l : x.value)
				  		<option value="#(l.id)">#(l.name)</option>
				  		#end
				  	</optgroup>
				  	#end
				</select>
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label"><span class="color-warn">*</span> 文章内容</label>
    		<div class="layui-input-block">
    			<div id="editor"></div>
    		</div>
  		</div>
  		<div class="layui-hide">###隐藏用于表单提交的textarea
  			<textarea id="artContent" rows="0" cols="0" name="content"></textarea>
  			<textarea id="artContentText" rows="0" cols="0" name="contentText"></textarea>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">作者</label>
    		<div class="layui-input-inline">
      			<input type="text" name="author" placeholder="请输入文章作者" class="layui-input">
    		</div>
    		<div class="layui-form-mid layui-word-aux">可以手动指定在页面上显示的作者名</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">来源</label>
    		<div class="layui-input-inline">
      			<input type="text" name="source" placeholder="请输入文章来源" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">标签</label>
    		<div class="layui-input-block">
      			<input type="text" name="tag" placeholder="请输入文章标签" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">关键字</label>
    		<div class="layui-input-block">
      			<input type="text" name="keywords" placeholder="请输入文章关键字" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">是否置顶</label>
    		<div class="layui-input-inline">
      			<input type="checkbox" name="isTop" lay-skin="switch" lay-text="是|否" value="1">
    		</div>
  		</div>
  		<div id="thumbnail-item" class="layui-form-item layui-hide">###已经上传的缩略图
    		<label class="layui-form-label">已传缩略图</label>
    		<div id="thumbnail-input" class="layui-input-block"></div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">缩略图</label>
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn layui-btn-primary" id="thumbnail">传缩略图</button>
      			<span class="layui-word-aux">每篇文章最多只能有一张缩略图，多次上传将以最后一张为准</span>
    		</div>
  		</div>
  		#if(artType=='1')
  		<div id="files-item" class="layui-form-item layui-hide">###已经上传的附件
    		<label class="layui-form-label">已传附件</label>
    		<div id="files-input" class="layui-input-block">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">附件</label>
    		<div class="layui-input-block">
      			<button type="button" class="layui-btn layui-btn-primary" id="uploadFile">上传附件</button>
    			<span class="layui-word-aux">每次上传一个，多个附件需要分次长上传</span>
    		</div>
  		</div>
  		#end
  		#if(artType=='2')
  		<div id="files-item" class="layui-form-item layui-hide">###已经上传的附件
    		<label class="layui-form-label">已传图片</label>
    		<div id="files-input" class="layui-input-block"></div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">图片</label>
    		<div class="layui-input-block">
      			<button id="uploadPic" type="button" class="layui-btn layui-btn-primary">上传图片</button>
    			<span class="layui-word-aux">支持多张图片同时上传</span>
    		</div>
  		</div>
  		#end
  		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button class="layui-btn" onclick="ajaxSaveForm('#saveArticle')">立即提交</button>
      			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
    		</div>
  		</div>
  	</form>
</div>

###layui中需要动态渲染的内容 
#@jsInit()

###wangEditor一定要提前引入，不然会报错
<script type="text/javascript">
	let E = window.wangEditor;
	let editor = new E('#editor');//指定富文本容器
    editor.config.debug = true;
    editor.config.zIndex = 1;
    editor.config.showFullScreen = false;//去掉全屏按钮
    editor.config.pasteFilterStyle = true;//过滤掉复制文本的样式，不适用于IE浏览器
    editor.config.focus = false;//取消自动focus
    editor.config.showLinkImg = false;//隐藏“网络图片”tab
    editor.config.uploadImgServer = '/file/uploadImg4Editor';//富文本图片上传到服务器地址
    editor.config.uploadFileName = 'file';//自定义图片的 fileName
    editor.config.uploadImgMaxLength = 1;//限制一次最多上传1张图片
    editor.config.uploadImgAccept = #(SiteInfo.editorImgSuffix);//限定图片类型
    editor.config.uploadImgMaxSize = #(SiteInfo.imgMaxSize.toInt()*1024*1024);//上传图片的大小限定，单位M
    editor.config.uploadImgParams = {//上传图片的自定义参数，参数会被添加到 formData 中，一起上传到服务端。
   		type: 'artImg'
   	}
    editor.config.showLinkVideo = false;//即可隐藏插入网络视频的功能，即只保留上传本地视频
    editor.config.uploadVideoServer = '/file/uploadVideo4Editor';//富文本视频上传到服务器地址
    editor.config.uploadVideoName = 'video';
    editor.config.uploadVideoAccept = #(SiteInfo.editorVideoSuffix);//限定视频类型
    editor.config.uploadVideoMaxSize = #(SiteInfo.videoMaxSize.toInt()*1024*1024);//上传视频的大小限定，单位M
    editor.config.uploadVideoParams = {
   		type: 'artVideo'
   	}
    // 配置菜单栏，设置不需要的菜单
    editor.config.excludeMenus = [
        'emoticon'
    ];
    
    let $artContent = $('#artContent');
    let $artContentText = $('#artContentText');
   	// 用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发 onchange 函数执行
    editor.config.onchange = function (html) {
        //监控变化，同步更新到 textarea，最终表单通过textarea提交
        $artContent.val(html);//富文本编辑器的html内容，注意是是不包含任何样式的纯 html
        $artContentText.val(editor.txt.text());//富文本编辑器的text文本
    }
   	// 创建富文本
    editor.create();
</script>

###文件上传
<script>
	var upload = layui.upload;
	// 缩略图上传处理
	upload.render({
	    elem: '#thumbnail', //绑定元素
	    url: '/file/uploadThumbnail', //上传接口
	    data: {type: 'thumbnail'},//其他额外参数，此处是缩略图
	    accept: 'images', //接受上传的类型
	    acceptMime: 'image/*', //只显示图片文件
	    exts: '#(SiteInfo.thumbnailSuffix)', //允许的文件扩展名，图片是相对固定的
	    size: #(SiteInfo.imgMaxSize.toInt()*1024), //允许的大小，单位KB，使用siteInfo中的变量
	    done: function(res, index, upload){//上传接口请求成功的回调
	    	if('ok'==res.state){//后台返回成功
	    		layer.msg(res.msg);
	    		$("#thumbnail-item").removeClass("layui-hide");
	    		var html = "<input type='checkbox' name='thumbnail' value='"+res.fileId+"' title='"+res.fileName+"' checked>";
	    		html = html + "<a href='javascript:;' onclick='viewImg("+res.fileId+")' class='layui-btn layui-btn-sm'>预览</a>";
	    		$("#thumbnail-input").html(html);
	    		form.render("checkbox");
	    	} else {//后台返回失败
	    		layer.msg(res.msg);
	    	}
	    },
	    error: function(index, upload){//上传请求失败的回调
	    	layer.msg("文件上传失败");
	    }
	});
	
	// 附件上传处理
	upload.render({
	    elem: '#uploadFile', //绑定元素
	    url: '/file/uploadAnnex', //上传接口
	    data: {type: 'annex'},//其他额外参数，此处是附件
	    accept: 'file', //接受上传的类型
	    exts: '#(SiteInfo.fileSuffix??)', //允许的文件扩展名，使用siteInfo中的变量
	    size: #(SiteInfo.fileMaxSize.toInt()*1024), //允许的大小，单位KB，使用siteInfo中的变量
	    done: function(res, index, upload){//上传接口请求成功的回调
	    	if('ok'==res.state){//后台返回成功
	    		layer.msg(res.msg);
	    		$("#files-item").removeClass("layui-hide");
	    		$("#files-input").append("<input type='checkbox' name='files' value='"+res.fileId+"' title='"+res.fileName+"' checked>");
	    		form.render("checkbox");
	    	} else {//后台返回失败
	    		layer.msg(res.msg);
	    	}
	    },
	    error: function(index, upload){//上传请求失败的回调
	    	layer.msg("文件上传失败");
	    }
	});
	
	//图片上传处理
	upload.render({
	    elem: '#uploadPic', //绑定元素
	    url: '/file/uploadImgs', //上传接口
	    data: {type: 'artPic'},//其他额外参数，此处是文章图片
	    accept: 'images', //接受上传的类型
	    size: #(SiteInfo.imgMaxSize.toInt()*1024), //允许的大小，单位KB，使用siteInfo中的变量
	    multiple: true,
	    done: function(res, index, upload){//上传接口请求成功的回调
	    	if('ok'==res.state){//后台返回成功
	    		layer.msg(res.msg);
	    		$("#files-item").removeClass("layui-hide");
    			$("#files-input").append("<input type='checkbox' name='files' value='"+res.fileId+"' title='"+res.fileName+"' checked>");
	    		$("#files-input").append("<a href='javascript:;' onclick='viewImg("+res.fileId+")' class='layui-btn layui-btn-sm'>预览</a> ");
    			form.render("checkbox");
	    	} else {//后台返回失败
	    		layer.msg(res.msg);
	    	}
	    },
	    error: function(index, upload){//上传请求失败的回调
	    	layer.msg("文件上传失败");
	    }
	});
</script>
#end